<template>
	<view v-show="display" class="tui-common-words-container">
		<view class="tui-common-words-box">
			<view class="tui-common-words-title">
				<view>{{sendwordText}}</view>
				<view style="color: #006EFF; font-family: PingFangSC-Regular;" class="tui-common-words-close" @tap="handleClose">{{coloseText}}</view>
			</view>
			<view class="tui-search-bar">
				<image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
				<input class="tui-search-bar-input" :value="words" :placeholder="searchwordText" @input="wordsInput" />
			</view>
			<view>
				<!-- 空白页 -->
				<u-empty v-if="isEmpty === true && wordsDataList.length === 0" :text="emptyText" mode="list"></u-empty>
				<u-loadmore
						:status="loadStatus" 
						:loading-text="loadingText" 
						:loadmore-text="loadmoreText" 
						:nomore-text="nomoreText" 
						loadingIcon="semicircle"
						@loadmore="getWordsPage"
					/>
				<scroll-view class="tui-common-words-list" scroll-y="true" enable-flex="true" v-if="wordsDataList.length>0">
					<view v-for="(item, index) in wordsDataList" :key="index" class="tui-common-words-item" @tap="sendMessage" :data-words="item.name">{{ item.name }}</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
import {wordsPage} from '@/common/http.api.js'
const commonWordsList = [
	'什么时候发货',
	'发什么物流',
	'为什么物流一直没更新',
	'最新优惠',
	'包邮吗',
	'修改地址信息',
	'修改收件人信息',
	'物流一直显示正在揽收',
	'问题A',
	'问题B'
];

export default {
	data() {
		return {
			words: '',
			//加载更多标志
			loadMoreFlag:false,
			isEmpty:false,
			wordsDataList: [],
			loadStatus: 'loadmore',
			emptyText:'',
			loadingText: '',
			loadmoreText: '',
			nomoreText: '',
			params: {
				name:null,
				pageNo: 1,
				pageSize: 10,
			},
			coloseText:'',
			sendwordText:'',
			searchwordText:'',
			//commonWordsMatch: this.wordsDataList
		};
	},

	components: {},
	props: {
		display: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		display: {
			handler: function(newVal) {
				// this.setData({
				//   display: newVal
				// });
			},
			immediate: true
		}
	},
	created() {
		this.refresh();
		this.getWordsPage();
	},
	methods: {
		refresh(){
			this.emptyText = this.$t('common.empty.text');
			this.loadingText = this.$t('common.loading.text');
			this.loadmoreText = this.$t('common.loadmore.text');
			this.nomoreText = this.$t('common.nomore.text');

			this.coloseText = this.$t('common.colose.text');
			this.sendwordText = this.$t('chat.sendword.text');
			this.searchwordText = this.$t('chat.searchword.text');
		},
		getWordsPage(){
			wordsPage(this.params).then((res)=>{
				if(res.code === 0){
				  if(res.data.list.length === 0){
					this.isEmpty = true;
					this.loadStatus = 'nomore'
					this.loadMoreFlag = false;
				  }else if (res.data.list.length < 10) {
					this.loadStatus = 'nomore'
					this.loadMoreFlag = false;
				  } else {
					this.params.pageNo++;
					this.loadStatus = 'loading'
					this.loadMoreFlag = true;
				  }
				  if (this.params.pageNo > 1) {
					this.wordsDataList = this.wordsDataList.concat(res.data.list);
				  } else {
					this.wordsDataList = res.data.list;
				  }
				}
			  }).catch(error=>{
				console.error(error)
			  })
		},
		handleClose() {
			this.$emit('close', {
				detail: {
					key: '0'
				}
			});
		},
		wordsInput(e) {
			this.params.name = e.detail.value;
			this.getOrderPage();
		},
		sendMessage(e) {
			this.$emit('sendMessage', {
				detail: {
					message: e.currentTarget.dataset.words
				}
			});
		}
	}
};
</script>
<style>
@import './index.css';
</style>
